<template>
	<view>
		<view class="search-row">
			<input type="text" v-model="inpValue" placeholder="请输入您要搜索的商品" @input="input" />
			<button type="default" v-show="isFocus" @click="cancel">取消</button>
		</view>
		<view class="search-content">
			<navigator url="/pages/goodDetail/goodDetail" class="search-item" v-for="item in goods" :key="item.goods_id">
				{{item.goods_name}}
			</navigator>
		</view>
	</view>
</template>

<script>
	import { request } from "../../utils/api.js";
	export default {
		data() {
			return {
				goods: [], //搜索商品列表
				isFocus: false, //取消按钮是否显示
				inpValue:"" //输入框的值
			}
		},
		methods:{
			input(e){
				//检查合法性
				if(this.inpValue.trim()){
					this.isFocus=true;
				}else{
					this.goods=[];
					this.isFocus=false;
					return;
				}
				//准备发送请求获取数据
				this.isFocus=true;
				clearTimeout(this.TimeId);
				this.TimeId=setTimeout(()=>{
					this.qsearch(this.inpValue)
				},1000);
			},
			//发送请求获取搜索数据
			async qsearch(query){
				const res=await request({url:'/goods/qsearch',data:{query}})
				console.log(res)
				this.goods=res
			},
			//点击取消按钮
			cancel(){
				this.inpValue="";
				this.isFocus=false;
				this.goods=[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #dedede;
		padding: 20rpx;
	}

	.search-row {
		height: 60rpx;
		display: flex;

		input {
			background-color: #fff;
			flex: 1;
			height: 100%;
			padding-left: 30rpx;
		}

		button {
			width: 110rpx;
			height: 100%;
			padding: 0;
			margin: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
		}
	}

	.search-content {
		margin-top: 30rpx;

		.search-item {
			background-color: #fff;
			font-size: 26rpx;
			padding: 15rpx 10rpx;
			border-bottom: 1rpx solid #ccc;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>
